<!DOCTYPE html>
<html>
<head>
    <title>Tel-O-Fun</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <link rel="stylesheet" href="css/greenBlack.css" />
    <link rel="stylesheet" href="css/structure.css" />
    <link rel="stylesheet" href="css/style.css" />

    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile.js"></script>

    <script src="js/mongoDbHandler.js"></script>
</head>
<body>
    <div id="favoritesStationList" data-role="page" data-title="Station List" data-theme="b">
        <div data-role="header" data-position="fixed">
            <h1>Customized</h1>
            <a href="#" data-rel="back" data-icon="back" data-direction="reverse" data-transition="slide">Back</a>
            <a href="index.html#home" data-iconpos="right" data-icon="home" data-transition="pop">Home</a>
        </div>

        <div id="hebrewList" data-role="content">
            <div style="padding-bottom: 50px">
                <label for="nameByLoc">Add current position</label>
                <input type="text" name="nameByLoc" id="nameByLoc" value="" placeholder="Station Name" />

                <div data-role="controlgroup" style="text-align: center">
                    
                    <a href="#save" onclick="return getStation();" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="check" data-theme="b">Save</a>

                </div>
            </div>

            <div>
                <label for="nameByLoc2">Add a custom station</label>
                <input type="text" name="name" id="nameByLoc2" value="" placeholder="Station Name"/>
                <input type="text" name="name" id="Latitude" value="" placeholder="Latitude"/>
                <input type="text" name="name" id="Longitude" value="" placeholder="Longitude"/>
                <div data-role="controlgroup" style="text-align: center">

                    <a href="#save" onclick="return setStation();" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="check" data-theme="b">Save</a>
                </div>
            </div>
            
            
            <div id="save" data-role="popup">
                <a href="#" onclick="return clearPopup()" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
                <p id="savePar" style="text-align: center; min-width: 100px;"></p>
            </div>
        </div> <!-- end content -->

        <script>
            loadContent();
        </script>
        <div data-role="content">
            <ul id="manuallyAddedTable" data-role="listview" data-divider-theme="b" data-inset="true" data-count-theme="b" data-theme="b" data-split-theme="b" >
                <li data-role="list-divider">Manually Added
                </li>
<!--                <li>example
                    <span class="ui-li-count">Del</span>
                </li>-->
            </ul>
        </div>
    </div> <!-- end page -->


</body>
</html>